<template>
  <div class="body">
    <div class="content">
      <div class="card_box">
        <div class="card_header">基本信息</div>
        <div
          class="card_box_descriptions"
          style="
            display: flex;
            justify-content: space-evenly;
            align-items: center;
          "
        >
          <div class="detail">
            <el-image
              style="height: 25vw; width: 100%"
              src="https://media.epower7.cn//Files/202411/202411061314265895897.png"
              fit="cover"
            />
            <div class="mask">
              <h3>青澜实业</h3>
              <p>
                苏州大健康产业加速器位于黄埭镇苏阳路，总面积5.8万平方米，实用面积4.5万平方米，拥有一栋5层的单体建筑，地上4层，设置了展厅、路演厅、共享办公室、多功能茶室等多个功能区；地下1层，为大型停车场。该科创载体已在2021年10月底建成并投入使用。
                投用后，大健康产业加速器以“围绕产业做园区、做产业化的园区”为发展理念，以数字健康、康复器械、智慧养老为主要产业领域，搭建政策扶持平台、公共服务平台、大数据信息服务平台、专业技术服务平台、科技金融平台、人力资源平台等6大服务平台，构建创新生态圈，打造集研发、生产、销售、服务、展示为一体的区医疗器械产业化基地。截至目前，累计引进企业超40家。
              </p>
            </div>
          </div>
          <div class="map">
            <Map />
          </div>
        </div>
      </div>
    </div>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div class="list_item">
        <div class="list_item_left">
          <div class="item_text_success">1</div>
          <div>建筑（栋）</div>
          <div class="item_text_success">83</div>
          <div>办公室（间）</div>
        </div>
        <div class="list_item_right">
          <div
            class="round_item"
            style="color: #09b7b0; background-color: #e5fbfa"
          >
            21.54
          </div>
          <div>累计用电量（万度）</div>
        </div>
      </div>
      <div class="list_item">
        <div class="list_item_left">
          <div class="item_text_success">54</div>
          <div>现有租户</div>
          <div class="item_text_error">3</div>
          <div>退出租户</div>
        </div>
        <div class="list_item_right">
          <div
            class="round_item"
            style="color: #197dec; background-color: #eaf4ff"
          >
            57
          </div>
          <div>累计租户</div>
        </div>
      </div>
      <div class="list_item">
        <div class="list_item_left">
          <div class="item_text_success">35</div>
          <div>在线智联器</div>
          <div class="item_text_error">0</div>
          <div>离线智联器</div>
          <div class="item_text_error" style="color: #333335">0</div>
          <div>关闭智联器</div>
        </div>
        <div class="list_item_right">
          <div
            class="round_item"
            style="color: #6a37ea; background-color: #f0eaff"
          >
            57
          </div>
          <div>智联器</div>
        </div>
      </div>
      <div class="list_item">
        <div class="list_item_left">
          <div class="item_text_success">217</div>
          <div>在线电表</div>
          <div class="item_text_error">4</div>
          <div>离线智电表</div>
          <div class="item_text_error" style="color: #333335">8</div>
          <div>关闭电表</div>
        </div>
        <div class="list_item_right">
          <div
            class="round_item"
            style="color: #e58f00; background-color: #fff4de"
          >
            229
          </div>
          <div>电表</div>
        </div>
      </div>
    </div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
      "
    >
      <div class="card_box" style="width: 32%">
        <div class="card_header">客户缴费情况</div>
        <div class="card_box_descriptions">
          <div class="scroll-container">
            <div class="list_title">
              <div>公司</div>
              <div>缴费情况</div>
            </div>
            <ul ref="scrollList" class="scroll-list">
              <li
                v-for="(item, index) in items"
                :key="item.id"
                class="scroll-item"
              >
                <div>
                  <span style="font-weight: 600">{{ index + 1 }}. </span>
                  {{ item.text }}
                </div>
                <div v-show="hasRemainder[index]">欠费：-10{{ index }}</div>
                <div v-show="!hasRemainder[index]">缴费：100{{ index }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card_box" style="width: 32%">
        <div
          class="card_header"
          style="
            background: linear-gradient(
              90deg,
              #e6a23c,
              rgba(230, 162, 60, 0.2),
              rgba(44, 166, 224, 0)
            );
          "
        >
          告警信息
        </div>
        <div class="card_box_descriptions">
          <div class="scroll-container">
            <div class="list_title">
              <div>告警</div>
              <div>告警情况</div>
            </div>
            <ul ref="scrollList" class="scroll-list">
              <li
                v-for="(item, index) in items"
                :key="item.id"
                class="scroll-item"
              >
                <div>
                  <span style="font-weight: 600">{{ index + 1 }}. </span>
                  {{ item.text }}
                </div>
                <div v-show="hasRemainder[index]">智联器连接异常</div>
                <div v-show="!hasRemainder[index]">
                  电费临界点：1{{ index }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card_box" style="width: 32%">
        <div
          class="card_header"
          style="
            background: linear-gradient(
              90deg,
              #e73e2e,
              rgba(230, 71, 57, 0.2),
              rgba(44, 166, 224, 0)
            );
          "
        >
          待收费租户列表
        </div>
        <div class="card_box_descriptions">
          <div class="scroll-container">
            <div class="list_title">
              <div>租户</div>
              <div>缴费情况</div>
            </div>
            <ul ref="scrollList" class="scroll-list">
              <li
                v-for="(item, index) in items"
                :key="item.id"
                class="scroll-item"
              >
                <div>
                  <span style="font-weight: 600">{{ index + 1 }}. </span>
                  {{ item.text }}
                </div>
                <div v-show="hasRemainder[index]">欠费：-10{{ index }}</div>
                <div v-show="!hasRemainder[index]">缴费：100{{ index }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
      "
    >
      <div class="card_box" style="width: 48%">
        <div class="card_header">近一周用电</div>
        <div class="card_box_descriptions">
          <lineChartS />
        </div>
      </div>
      <div class="card_box" style="width: 48%">
        <div class="card_header">行业占比</div>
        <div class="card_box_descriptions">
          <pieChat />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Map from "@/components/Map.vue";
import { ref, onMounted, onUnmounted, computed } from "vue";
import lineChartS from "../../components/lineChartS.vue";
import pieChat from "../../components/pieChart.vue";
const items = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    text: `Item ${i + 1}`,
  }))
);
const scrollList = ref(null);
let intervalId;

const hasRemainder = computed(() => {
  return items.value.map((_, index) => index % 2 !== 0);
});

const startAutoScroll = () => {
  intervalId = setInterval(() => {
    if (scrollList.value) {
      scrollList.value.scrollTop += 1; // 每次滚动1px
      if (
        scrollList.value.scrollTop >=
        scrollList.value.scrollHeight - scrollList.value.clientHeight
      ) {
        scrollList.value.scrollTop = 0; // 回到顶部重新开始
      }
    }
  }, 50); // 每50ms滚动一次
};

onMounted(() => {
  startAutoScroll();
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style lang="less" scoped>
.content {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
}
.card_header {
  background: linear-gradient(
    90deg,
    #409eff,
    rgba(44, 166, 224, 0.2),
    rgba(44, 166, 224, 0)
  );
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 15px 20px;
  color: #fff;
}
.card_box {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
  margin-bottom: 25px;
}
.card_box_descriptions {
  padding: 15px;
}
.detail {
  width: 60%;
  height: 25vw;
  border-radius: 15px;
  position: relative;
}
.map {
  width: 35%;
  border-radius: 15px;
  height: 25vw;
}
.mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  // padding: 10px;
  color: white;
  h3 {
    text-indent: 15px;
  }
  p {
    padding: 0 15px;
  }
}
.list_item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 24%;
  border-radius: 15px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  .item_text_success {
    color: #0ab7ad;
    font-size: 1.25vw;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .item_text_error {
    color: #ff230a;
    font-weight: 600;
    font-size: 1.25vw;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .list_item_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-right: 1px solid #f0f0f0;
  }
  .list_item_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    .round_item {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #409eff;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 1.25vw;
    }
  }
}
.scroll-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.scroll-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scroll-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.list_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1vw;
  font-weight: 600;
  color: #333333;
  margin-bottom: 3px;
}
</style>
